<!DOCTYPE html>
<html lang="en">
<!--
See https://github.com/AnalyticalGraphicsInc/cesium-google-earth-examples/blob/master/LICENSE.md

Original Work:

Copyright 2008 Google Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<head>
    <title>Smooth Animation with frameend</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../Cesium//Widgets//widgets.css">
    <link rel="stylesheet" href="static/codemirror.css">
    <link rel="stylesheet" href="static/bootstrap-3.3.2-dist/css/bootstrap.css">
    <link rel="stylesheet" href="static/bootstrap-3.3.2-dist/css/bootstrap.cerylean.min.css">
    <link rel="stylesheet" href="static/examples.css">
    <script src="static/codemirror-compressed.js"></script>
    <script src="static/helpers.js"></script>
    <script src="../Cesium/Cesium.js"></script>
    <script src="static/jquery-2.1.3.min.js"></script>
    <script src="static/bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
</head>

<body onresize="onResize()">
    <header class="container">
        <div class="navbar navbar-default navbar-fixed-top">
            <div class="navbar-header">
                <button class="btn btn-primary navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="glyphicon glyphicon-menu-hamburger"></span>
                </button>
                <a class="navbar-brand" href="http://cesiumjs.org" target="_blank"><img src="static/Cesium_Logo_forDarkBackground.png" /></a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#" id="menuPreview" onclick="showPanel(this)">Show Preview</a></li>
                    <li><a href="#" id="menuCesium" onclick="showPanel(this)">Show Cesium Code</a></li>
                    <li><a href="#" id="menuGoogle" onclick="showPanel(this)">Show Google Earth Code</a></li>
                    <li><a href="http://cesiumjs.org/for-google-earth-developers.html" target="_blank">For Google Earth Developers</a></li>
                    <li><a href="../index.html" target="_blank">All Google Earth examples</a></li>
                    <li class="dropdown">
                        <a href="#" data-toggle="dropdown" class="dropdown-toggle">Additional Resources <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="http://cesiumjs.org/tutorials.html" target="_blank">Tutorials</a></li>
                            <li><a href="http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html" target="_blank">Cesium Sandcastle</a></li>
                            <li> <a href="http://cesiumjs.org/refdoc.html" target="_blank">Reference Documentation</a> </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <div id="preview">
        <div id="previewContent">
            <div id="buttonContainer">
                <button onclick="startAnimation()" class="cesium-button">Start Animation</button>
                <button onclick="stopAnimation()" class="cesium-button">Stop Animation</button>
            </div>
            <div id="cesiumContainer"></div>
        </div>
    </div>
    <div id="code">
        <div class="panel panel-primary" id="czmPanel">
            <div class="panel-heading">Relevant Cesium Source</div>
            <div class="panel-body">
                <textarea id="cesiumSource"></textarea>
            </div>
        </div>
        <div class="panel panel-primary" id="gePanel">
            <div class="panel-heading">Relevant Google Earth Source (<a target="_blank" href="https://code.google.com/p/earth-api-samples/source/browse/trunk/examples/event-frameend.html">link</a>)</div>
            <div class="panel-body">
                <textarea id="gesource">
                    function startAnimation() {
                        if (!animRunning) {
                            ge.getOptions().setFlyToSpeed(ge.SPEED_TELEPORT);
                            animRunning = true;
                            google.earth.addEventListener(ge, 'frameend', tickAnimation);

                            // start it off
                            tickAnimation();
                        }
                    }

                    function stopAnimation() {
                        if (animRunning) {
                            google.earth.removeEventListener(ge, 'frameend', tickAnimation);
                            animRunning = false;
                        }
                    }

                    function tickAnimation() {
                        // an example of some camera manipulation that's possible w/ the Earth API
                        var camera = ge.getView().copyAsCamera(ge.ALTITUDE_RELATIVE_TO_GROUND);
                        var dest = destination(camera.getLatitude(), camera.getLongitude(), 10, camera.getHeading());

                        camera.setAltitude(ANIM_ALTITUDE);
                        camera.setLatitude(dest[0]);
                        camera.setLongitude(dest[1]);

                        ge.getView().setAbstractView(camera);
                    }

                    /* Helper functions, courtesy of
                       http://www.movable-type.co.uk/scripts/latlong.html */
                    function distance(lat1, lng1, lat2, lng2) {
                        var a = Math.sin(lat1 * Math.PI / 180) * Math.sin(lat2 * Math.PI / 180);
                        var b = Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.cos((lng2 - lng1) * Math.PI / 180);
                        return 6371000 * Math.acos(a + b);
                    }

                    function destination(lat, lng, dist, heading) {
                        lat *= Math.PI / 180;
                        lng *= Math.PI / 180;
                        heading *= Math.PI / 180;
                        dist /= 6371000; // angular dist

                        var lat2 = Math.asin(Math.sin(lat) * Math.cos(dist) + Math.cos(lat) * Math.sin(dist) * Math.cos(heading));

                        return [180 / Math.PI * lat2, 
                                180 / Math.PI * (lng + Math.atan2(Math.sin(heading) * Math.sin(dist) * Math.cos(lat2), 
                                        Math.cos(dist) - Math.sin(lat) * Math.sin(lat2)))];
                    }
                </textarea>
            </div>
        </div>
    </div>
    <script>
		Cesium.BingMapsApi.defaultKey = 'AgH8JB-gA1Wo9ZbGL9oCEqfD-4YAkMnMp_XzzoGbynt_CC6l27GFWqN8SJaYm6aC';
        var viewer = new Cesium.Viewer('cesiumContainer', {
            fullscreenElement: 'previewContent'
        });
        var scene = viewer.scene;
        var camera = viewer.camera;

        var globe = scene.globe;
        globe.depthTestAgainstTerrain = true;
        var cesiumTerrainProviderMeshes = new Cesium.CesiumTerrainProvider({
            url : 'https://assets.agi.com/stk-terrain/world',
            requestWaterMask : true,
            requestVertexNormals : true
        });
        viewer.terrainProvider = cesiumTerrainProviderMeshes;


        function relevantSource() {
            var clock = viewer.clock;
            var eventHelper = new Cesium.EventHelper();
            var removeCallback;
            var height = 1000;
            var running = false;

            function startAnimation() {
                if (!running) {
                    running = true;
                    removeCallback = eventHelper.add(clock.onTick, onTick);
                }
            }

            function stopAnimation() {
                if (running) {
                    removeCallback();
                    running = false;
                }
            }

            function sampleTerrainSuccess(positions) {
                var position = positions[0];
                position.height += height; // add height to terrain height
                camera.position = Cesium.Ellipsoid.WGS84.cartographicToCartesian(position);
            }

            function sampleTerrain(lon, lat) {
                var terrainSamplePositions = [new Cesium.Cartographic(lon, lat)];
                Cesium.when(Cesium.sampleTerrain(viewer.terrainProvider, 11, terrainSamplePositions), sampleTerrainSuccess);
            }

            function onTick() {
                var pos = camera.positionCartographic;
                var lon = pos.longitude;
                var lat = pos.latitude;
                var dist = 1 / 63710; // angular dist;
                var heading = camera.heading;

                var newLat = Math.asin(Math.sin(lat) * Math.cos(dist)
                        + Math.cos(lat) * Math.sin(dist) * Math.cos(heading));
                var newLon = (lon + Math.atan2(Math.sin(heading) * Math.sin(dist) * Math.cos(newLat),
                        Math.cos(dist) - Math.sin(lat) * Math.sin(lon)));
                sampleTerrain(newLon, newLat);
            }

            window.startAnimation = startAnimation;
            window.stopAnimation = stopAnimation;
            window.sampleTerrain = sampleTerrain;
        }
        relevantSource();
        showSource('cesiumSource', relevantSource, 4);

        var target = new Cesium.Cartesian3(-2500361.97644566, -4389389.73065392, 3884586.2291527484);
        var offset = new Cesium.Cartesian3(4729.00787296053, -386.72026101499796, 802.2322768233716);
        camera.lookAt(target, offset);
        camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
        sampleTerrain(camera.positionCartographic.longitude, camera.positionCartographic.latitude);
    </script>
</body>
</html>